<div ng-if="!hasExplorationId()">
  Warning: The file picker does not work outside the context of an exploration.
</div>
<div ng-if="hasExplorationId()">
  <div ng-show="!imageUploaderIsActive">

    <div ng-if="!filepathsLoaded">
      <span class="text-align: center; width: 50px;">
        Loading...
      </span>
    </div>

    <div ng-repeat="filepath in filepaths track by $index">
      <label>
        <input type="radio" ng-model="localValue.label"
               name="choiceGroup" id="<[filepath]>"
               value="<[filepath]>">
        <[filepath]>
      </label>
    </div>
    <img ng-if="localValue.label" ng-src="<[getPreviewUrl(localValue.label)]>"/>

    <br><br>
    <button type="button" class="btn btn-default" ng-click="openImageUploader()">Upload a new image</button>
  </div>

  <div ng-show="imageUploaderIsActive" style="border: 1px solid black; padding: 5px;">
    <div class="oppia-warning">
      Before uploading any images, please ensure that they are compatible with the <a href="/about#license" target="_blank">license terms</a> of this site (the link opens in a new window).
    </div>
    <input type="file" id="newImage" class="protractor-test-file-upload">
    <br>
    Choose a filename: <input type="text" ng-model="newImageFilename" class="protractor-test-file-name">
    <br>
    <button type="button" class="btn btn-success" ng-click="uploadNewImage(newImageFilename)" ng-disabled="!newImageFilename">Save</button>
    <button type="button" class="btn btn-default" ng-click="closeImageUploader()">Cancel</button>
  </div>
</div>
